<template>
<div class="container">
        <div class="alert alert-danger alert-dismissible fade show text-center"  ref="message">
          <strong>错误!</strong> {{error}}
        </div>
          <div class="col-md-4 col-md-offset-4 login">
            <div class="border rounded" style="padding: 20px; background-color: rgb(249, 249, 249);">
              <div class="text-center">欢迎来到活图网！</div>
              <form class="login">
                  <div class="form-group">
                    <label for="username">账号：</label>
                    <input type="text" class="form-control"  v-model="username">
					<label>{{error_un}}</label>
                  </div>
                  <div class="form-group">
                    <label for="password">密码：</label>
                    <input type="password" class="form-control"  v-model="password">
					<label>{{error_pd}}</label>
                  </div>
				  <div class="form-group">
                    <label for="password">邮箱：</label>
                    <input type="email" class="form-control"  v-model="email">
					<label>{{error_em}}</label>
                  </div>
				  <div class="form-group">
                    <label for="password">验证码：</label>
                    <input type="text" class="form-control"  v-model="emailCode">
					<label>{{error_cd}}</label>
                  </div>
                  <div class="container">
					<!-- 代码里用到了 form 标签，点击button按钮的时候同时执行了form表单的 submit 事件和自己设置的 click 事件，
						一次空的表单提交重置了请求。 -->
                    <button type="button" class="btn btn-primary" 
						style="width: 45%;margin-right: 10px;" v-on:click="regest">注册</button>
                    <button type="button" class="btn btn-primary"
						 id="button_code" style="width: 45%;margin-left: 10px;;" v-on:click="GetCode">获取验证码</button>
                  </div>
                </form>
            </div>
          </div>
  </div>
  </template>
  
<script>
import axios from 'axios';

  export default {
    data() {
      return {
        username: '',
        password: '',
		email: '',
		emailCode:'',
		error:'',
		// 字段报错信息
		error_un:'',
		error_pd:'',
		error_em:'',
		error_cd:'',
      }
    },
	mounted () {
		this.$refs.message.style.display='none';
	},
    methods: {
		regest() {
			axios.post("http://127.0.0.1:80/register/", {
				'userid':this.username,
				'passwd':this.password,
				'email':this.email,
				'code':this.emailCode
			}).then((response) => {
				if(response.data.code=='207'){
					alert("注册成功");
					this.$router.push('/');
				}
			}).catch((error) => {

			})
      	},
		GetCode(){
			self = this;
			axios.post("http://127.0.0.1:80/getcode/",{
				'email': this.email
			})
			.then(function (response){
				console.log(response);
				if(response.status=='200'){
					self.bindButton()
				}
			})
			.catch(function (error){
				console.log(error);

			})
		},
		bindButton(){
			var countdown = 60;
			// 设置定时器
			var timer = setInterval(function(){
				// 在开始计时之前，就设置不可点击
				document.getElementById("button_code").disabled=true;
				document.getElementById("button_code").innerHTML=countdown+"s";
				countdown -= 1;
				if(countdown <= 0){
					// 清除计数器
					clearInterval(timer);
					// 重新设置文字
					document.getElementById("button_code").innerHTML="获取验证码";
					document.getElementById("button_code").disabled=false;
				}
			}, 1000);
		}
    }
  }
</script>

<style>
	.login{
		margin: auto;
		margin-top: 10%;
	}
</style>